<template>
  <div class="types">
    <span @click="selectType('-')"
          :class="value === '-' && 'selected'">支出</span>
    <span @click="selectType('+')"
          :class="value === '+' && 'selected'">收入</span>
  </div>

</template>

<script lang="ts">
import Vue from 'vue';
import {Component} from 'vue-property-decorator';

@Component
export default class Types extends Vue {
  value = this.$store.state.record.type;

  selectType(t: string) {
    if (t !== '-' && t !== '+') {
      throw new Error('type is unknown');
    }
    this.value = t;
    this.$store.commit('updateRecord', {'name': 'type', value: t});
  }
}
</script>


<style lang="scss" scoped>
.types {
  display: flex;
  background-color: #c4c4c4;
  font-size: 24px;

  span {
    width: 50%;
    padding: 8px 0;
    text-align: center;

    &.selected {
      border-bottom: 3px solid;
    }
  }
}
</style>